import React, { useEffect, useState } from 'react'
import { NavBar, Swiper, Image, Tag, Rate } from 'react-vant';
import { Search, Shop } from '@react-vant/icons';
import sendHttp from '../../http/sendHttp';
import { useSearchParams,useNavigate } from 'react-router-dom';
import './Home.scss'


export default function Home() {
    const [search] = useSearchParams()
    const cityGeohash = search.get('geohash')
    const [city, setCity] = useState({})
    const [entry, setEntry] = useState([])
    // const [entry2, setEntry2] = useState([])
    const [shopList, setShopList] = useState([])
    const navigate = useNavigate()


    useEffect(() => {
        sendHttp('get', `/v2/pois/${cityGeohash}`)
            .then((res) => {
                // console.log(res.data);
                setCity(res.data)
                return res.data
            })
            .then((res) => {
                sendHttp('get', `/shopping/restaurants?latitude=${res.latitude}&longitude=${res.longitude}`)
                    .then((res) => {
                        console.log(res.data);
                        setShopList(res.data)
                    })
            })
        sendHttp('get', `v2/index_entry`)
            .then((res) => {
                setEntry(res.data)
                // console.log(res.data);
            })
    }, [])

    return (
        <div className='home'>
            <NavBar
                title={city.address}
                leftText={<Search color='#fff' />}
                rightText={<div>登录|注册</div>}
            />
                <div className='swipe'>
                    <Swiper>
                        <Swiper.Item>
                            {(entry.slice(0, 8)).map(item => {
                                return (
                                    <div className='swipe-item' key={item.id} onClick={() => {
                                        navigate(`/info?latitude=${city.latitude}&longitude=${city.longitude}&cate_id=${item.id}&title=${item.title}`)
                                    }}>
                                        <div className='swipe-img'><Image src={`https://fuss10.elemecdn.com${item.image_url}`}></Image></div>
                                        <div className='swipe-name'>{item.title}</div>
                                    </div>
                                )
                            })}
                        </Swiper.Item>
                        <Swiper.Item>
                            {(entry.slice(8, 16)).map(item => {
                                return (
                                    <div className='swipe-item' key={item.id}>
                                        <div className='swipe-img'><Image src={`https://fuss10.elemecdn.com${item.image_url}`}></Image></div>
                                        <div className='swipe-name'>{item.title}</div>
                                    </div>
                                )
                            })}
                        </Swiper.Item>
                    </Swiper>
                </div>
            <div className="shops">
                <div className='shops-top'>
                    <div className='shops-icon'><Shop /></div>
                    <div className='shops-title'>附近商家</div>
                </div>
                {shopList.map(item => {
                    return (
                        <div className="shops-item" key={item.id}>
                            <div className='shops-img'><Image src={`https://elm.cangdu.org/img/${item.license.business_license_image}`}></Image></div>
                            <div className='shops-main'>
                                <div className='shop_title'>
                                    <span className='xgys'><Tag type="primary">品牌</Tag>{item.name}</span>
                                    <span className='bzp'>
                                        <ul>
                                            <li>保</li>
                                            <li>准</li>
                                            <li>票</li>
                                        </ul>
                                    </span>
                                </div>
                                <div className='shop_rot'>
                                    <Rate value={item.rating} size={12} gutter={1} color='#FFD21E' />
                                    <span className='rate'>{item.rating}</span>
                                    <span className='sale'>月销{item.recent_order_num}单</span>
                                    <span className='tag'>
                                        <Tag type="primary">蜂鸟转送</Tag>
                                        <Tag plain type="primary">准时达</Tag>
                                    </span>
                                </div>
                                <div className='shop_song'>
                                    <span> ￥{item.float_minimum_order_amount}起送 / {item.piecewise_agent_fee.tips} </span>
                                    <span className='gltime'>
                                        <div className="gl">{item.distance} /</div>
                                        <div className="time">{item.order_lead_time}</div>
                                    </span>
                                </div>
                            </div>
                        </div>
                    )
                })}

            </div>
        </div>
    )
}
